<template>
  <div class="main-container">
    <div class="blueBox cardStateBox">
      <div class="left">
        <div class="tops"><span>系统数据统计</span> </div>
        <div class="content">
          <div class="items">
            <a-skeleton :animation="true">
              <a-skeleton-line
                v-if="homestaticsForm.cardNumber == null || homestaticsForm.cardNumber == undefined"
                :animation="true"
                :rows="2"
                :lineHeight="20"
                :widths="[100, 60]"
                :lineSpacing="16"
              />
            </a-skeleton>
            <p class="p_1" v-if="homestaticsForm.cardNumber === 0 || homestaticsForm.cardNumber > 0"
              >系统卡板(张)</p
            >
            <p
              class="p_2"
              v-if="homestaticsForm.cardNumber === 0 || homestaticsForm.cardNumber > 0"
              >{{ homestaticsForm.cardNumber }}</p
            >
          </div>
          <div class="items">
            <a-skeleton :animation="true">
              <a-skeleton-line
                v-if="homestaticsForm.userNumber == null || homestaticsForm.userNumber == undefined"
                :animation="true"
                :rows="2"
                :lineHeight="20"
                :widths="[100, 60]"
                :lineSpacing="16"
              />
            </a-skeleton>
            <p class="p_1" v-if="homestaticsForm.userNumber === 0 || homestaticsForm.userNumber > 0"
              >系统客户(个)</p
            >
            <p
              class="p_2"
              v-if="homestaticsForm.userNumber === 0 || homestaticsForm.userNumber > 0"
              >{{ homestaticsForm.userNumber }}</p
            >
          </div>
          <div class="items">
            <a-skeleton :animation="true">
              <a-skeleton-line
                v-if="
                  homestaticsForm.orderNumber == null || homestaticsForm.orderNumber == undefined
                "
                :animation="true"
                :rows="2"
                :lineHeight="20"
                :widths="[100, 60]"
                :lineSpacing="16"
              />
            </a-skeleton>
            <p
              class="p_1"
              v-if="homestaticsForm.orderNumber === 0 || homestaticsForm.orderNumber > 0"
              >系统订单(条)</p
            >
            <p
              class="p_2"
              v-if="homestaticsForm.orderNumber === 0 || homestaticsForm.orderNumber > 0"
              >{{ homestaticsForm.orderNumber }}</p
            >
          </div>
          <div class="items">
            <a-skeleton :animation="true">
              <a-skeleton-line
                v-if="
                  homestaticsForm.cardActivation == null ||
                  homestaticsForm.cardActivation == undefined
                "
                :animation="true"
                :rows="2"
                :lineHeight="20"
                :widths="[100, 60]"
                :lineSpacing="16"
              />
            </a-skeleton>
            <p
              class="p_1"
              v-if="homestaticsForm.cardActivation === 0 || homestaticsForm.cardActivation > 0"
              >系统激活(张)</p
            >
            <p
              class="p_2"
              v-if="homestaticsForm.cardActivation === 0 || homestaticsForm.cardActivation > 0"
              >{{ homestaticsForm.cardActivation }}</p
            >
          </div>
          <div class="items">
            <a-skeleton :animation="true">
              <a-skeleton-line
                v-if="
                  homestaticsForm.withdrawalAmount == null ||
                  homestaticsForm.withdrawalAmount == undefined
                "
                :animation="true"
                :rows="2"
                :lineHeight="20"
                :widths="[100, 60]"
                :lineSpacing="16"
              />
            </a-skeleton>
            <p
              class="p_1"
              v-if="homestaticsForm.withdrawalAmount === 0 || homestaticsForm.withdrawalAmount > 0"
              >系统提现(元)</p
            >
            <p
              class="p_2"
              v-if="homestaticsForm.withdrawalAmount === 0 || homestaticsForm.withdrawalAmount > 0"
              >{{ homestaticsForm.withdrawalAmount }}</p
            >
          </div>
          <!-- <div class="items">
            <a-skeleton :animation="true">
              <a-skeleton-line
                v-if="mallForm.allUv == null || mallForm.allUv == undefined"
                :animation="true"
                :rows="2"
                :lineHeight="20"
                :widths="[100, 60]"
                :lineSpacing="16"
              />
            </a-skeleton>
            <p class="p_1" v-if="mallForm.allUv === 0 || mallForm.allUv > 0">商城访客(个)</p>
            <p class="p_2" v-if="mallForm.allUv === 0 || mallForm.allUv > 0">{{
              mallForm.allUv
            }}</p>
          </div> -->
          <!-- <div class="items">
            <a-skeleton :animation="true">
              <a-skeleton-line
                v-if="mallForm.allPv == null || mallForm.allPv == undefined"
                :animation="true"
                :rows="2"
                :lineHeight="20"
                :widths="[100, 60]"
                :lineSpacing="16"
              />
            </a-skeleton>
            <p class="p_1" v-if="mallForm.allPv === 0 || mallForm.allPv > 0">商品浏览(次)</p>
            <p class="p_2" v-if="mallForm.allPv === 0 || mallForm.allPv > 0">{{
              mallForm.allPv
            }}</p>
          </div> -->
          <!-- <div class="items"></div> -->
          <div class="items"></div>
        </div>
        <a-skeleton
          v-if="
            homestaticsForm.orderCarryOutNumber == null &&
            homestaticsForm.orderWaitForNumber == null
          "
          :animation="true"
          style="margin-top: 20px"
        >
          <a-skeleton-line
            :animation="true"
            :rows="1"
            :lineHeight="40"
            :widths="['100%']"
            :lineSpacing="16"
          />
        </a-skeleton>
        <a-alert v-else type="normal" style="margin-top: 20px">
          <template #icon>
            <icon-exclamation-circle-fill style="color: #3491fa" />
          </template>
          最近一次登陆IP为：{{ userForm.session.ip }}，登陆地址：{{ userForm.session.address }}
          <template #action> <span class="now" @click="gotoHandle">查看日志></span> </template>
        </a-alert>
      </div>
      <div class="right">
        <div style="font-size: 16px">系统快捷操作</div>
        <div class="content">
          <div class="btnsItem" @click="gotoRoutes('/children/pallet/oneCard')">
            <img src="@/assets/icon_click7.png" alt="" />
            <p>单卡管理</p>
          </div>
          <div class="btnsItem" @click="gotoRoutes('/children/pallet/palletlist')">
            <img src="@/assets/icon_click1.png" alt="" />
            <p>卡板列表</p>
          </div>
          <div class="btnsItem" @click="gotoRoutes('/children/meal/meallist')">
            <img src="@/assets/icon_click2.png" alt="" />
            <p>套餐列表</p>
          </div>
          <div class="btnsItem" @click="gotoRoutes('/children/user/personalCenter')">
            <img src="@/assets/icon_click3.png" alt="" />
            <p>个人中心</p>
          </div>
          <div class="btnsItem" @click="gotoRoutes('/children/user/user')">
            <img src="@/assets/icon_click4.png" alt="" />
            <p>客户列表</p>
          </div>
          <div class="btnsItem" @click="gotoRoutes('/children/finance/financelist')">
            <img src="@/assets/icon_click5.png" alt="" />
            <p>提现列表</p>
          </div>
          <div class="btnsItem" @click="gotoRoutes('/children/orders/order')">
            <img src="@/assets/icon_click6.png" alt="" />
            <p>订单列表</p>
          </div>
          <div class="btnsItem" @click="gotoRoutes('/children/system/setup')">
            <img src="@/assets/icon_click8.png" alt="" />
            <p>系统设置</p>
          </div>
        </div>
      </div>
    </div>
    <div class="contentBg tongjiBox_order">
      <div class="tops">
        <span style="font-size: 16px"> 系统订单统计</span>
        <div class="times">
          <span
            :class="[activeDay3 == '今日' ? 'actives' : 'noactive']"
            @click="changeTime('今日', 4)"
            >今日</span
          ><span
            :class="[activeDay3 == '昨日' ? 'actives' : 'noactive']"
            @click="changeTime('昨日', 4)"
            >昨日</span
          ><span
            :class="[activeDay3 == '上月' ? 'actives' : 'noactive']"
            @click="changeTime('上月', 4)"
            >上月</span
          ><span
            :class="[activeDay3 == '本月' ? 'actives' : 'noactive']"
            @click="changeTime('本月', 4)"
            >本月</span
          >
          <span
            :class="[activeDay3 == '近七日' ? 'actives' : 'noactive']"
            @click="changeTime('近七日', 4)"
            >近七日</span
          >
          <span
            :class="[activeDay3 == '近三十日' ? 'actives' : 'noactive']"
            @click="changeTime('近三十日', 4)"
            >近三十日</span
          >
          <!-- <a-range-picker
            style="width: 360px; margin: 0 0px 4px 10px"
            show-time
            :time-picker-props="{ defaultValue: ['00:00:00', '09:09:06'] }"
            format="YYYY-MM-DD HH:mm:ss"
            @ok="onOk"
          /> -->
        </div>
      </div>
      <div class="tabsBox">
        <div
          :class="[activeTab == 'user' ? 'items activeItems' : 'items']"
          @click="setActiveTab('user')"
        >
          <div class="left">
            <a-skeleton :animation="true" v-if="userRechargeList.lineTabs.userNumber == null">
              <a-skeleton-shape style="width: 30px; height: 30px" />
            </a-skeleton>
            <img v-else src="@/assets/lineicon7.png" alt="" />
          </div>
          <div class="right" v-if="userRechargeList.lineTabs.userNumber == null">
            <a-skeleton :animation="true">
              <a-skeleton-line
                :animation="true"
                :rows="3"
                :lineHeight="20"
                :widths="[60, 34, 110]"
                :lineSpacing="6"
              />
            </a-skeleton>
          </div>
          <div v-else class="right">
            <p class="addUser">新增客户</p>
            <p class="nums">{{ userRechargeList.lineTabs.userNumber }}</p>
            <div class="oner">
              <span>一级客户：</span>
              <span>{{ userRechargeList.lineTabs.userSystemNumber }}个</span>
            </div>
          </div>
        </div>
        <div
          :class="[activeTab == 'order' ? 'items activeItems' : 'items']"
          @click="setActiveTab('order')"
        >
          <div class="left">
            <a-skeleton :animation="true" v-if="userRechargeList.lineTabs.orderAmount == null">
              <a-skeleton-shape style="width: 30px; height: 30px" />
            </a-skeleton>
            <img v-else src="@/assets/lineicon1.png" alt="" />
          </div>
          <div class="right" v-if="userRechargeList.lineTabs.orderAmount == null">
            <a-skeleton :animation="true">
              <a-skeleton-line
                :animation="true"
                :rows="3"
                :lineHeight="20"
                :widths="[60, 34, 110]"
                :lineSpacing="6"
              />
            </a-skeleton>
          </div>
          <div v-else class="right">
            <p class="addUser">新增订单</p>
            <p class="nums">{{ userRechargeList.lineTabs.orderAmount }}</p>
            <div class="oner">
              <span>订单数量：</span>
              <span>{{ userRechargeList.lineTabs.orderNumber }}个</span>
            </div>
          </div>
        </div>
        <div
          :class="[activeTab == 'card' ? 'items activeItems' : 'items']"
          @click="setActiveTab('card')"
        >
          <div class="left">
            <a-skeleton :animation="true" v-if="userRechargeList.lineTabs.cardActivation == null">
              <a-skeleton-shape style="width: 30px; height: 30px" />
            </a-skeleton>
            <img v-else src="@/assets/lineicon2.png" alt="" />
          </div>
          <div class="right" v-if="userRechargeList.lineTabs.cardActivation == null">
            <a-skeleton :animation="true">
              <a-skeleton-line
                :animation="true"
                :rows="3"
                :lineHeight="20"
                :widths="[60, 34, 110]"
                :lineSpacing="6"
              />
            </a-skeleton>
          </div>
          <div v-else class="right">
            <p class="addUser">新增激活</p>
            <p class="nums">{{ userRechargeList.lineTabs.cardActivation }}</p>
            <div class="oner">
              <span>直属激活：</span>
              <span>{{ userRechargeList.lineTabs.cardSystemActivation }}个</span>
            </div>
          </div>
        </div>
        <div
          :class="[activeTab == 'draw' ? 'items activeItems' : 'items']"
          @click="setActiveTab('draw')"
        >
          <div class="left">
            <a-skeleton :animation="true" v-if="userRechargeList.lineTabs.withdrawalAmount == null">
              <a-skeleton-shape style="width: 30px; height: 30px" />
            </a-skeleton>
            <img v-else src="@/assets/lineicon3.png" alt="" />
          </div>
          <div class="right" v-if="userRechargeList.lineTabs.withdrawalAmount == null">
            <a-skeleton :animation="true">
              <a-skeleton-line
                :animation="true"
                :rows="3"
                :lineHeight="20"
                :widths="[60, 34, 110]"
                :lineSpacing="6"
              />
            </a-skeleton>
          </div>
          <div v-else class="right">
            <p class="addUser">新增提现</p>
            <p class="nums">{{ userRechargeList.lineTabs.withdrawalAmount }}</p>
            <div class="oner">
              <span>提现数量：</span>
              <span>{{ userRechargeList.lineTabs.withdrawalNumber }}个</span>
            </div>
          </div>
        </div>
        <!-- <div
          :class="[activeTab == 'balance' ? 'items activeItems' : 'items']"
          @click="setActiveTab('balance')"
        >
          <div class="left">
            <a-skeleton
              :animation="true"
              v-if="userRechargeList.lineTabs.cardBalanceRechargeAmount == null"
            >
              <a-skeleton-shape style="width: 30px; height: 30px" />
            </a-skeleton>
            <img v-else src="@/assets/lineicon5.png" alt="" />
          </div>
          <div class="right" v-if="userRechargeList.lineTabs.cardBalanceRechargeAmount == null">
            <a-skeleton :animation="true">
              <a-skeleton-line
                :animation="true"
                :rows="3"
                :lineHeight="20"
                :widths="[60, 34, 110]"
                :lineSpacing="6"
              />
            </a-skeleton>
          </div>
          <div v-else class="right">
            <p class="addUser">新增预存</p>
            <p class="nums">{{ userRechargeList.lineTabs.cardBalanceRechargeAmount }}</p>
            <div class="oner">
              <span>预存数量：</span>
              <span>{{ userRechargeList.lineTabs.cardBalanceRechargeNumber }}个</span>
            </div>
          </div>
        </div> -->
        <!-- <div
          :class="[activeTab == 'rebate' ? 'items activeItems' : 'items']"
          @click="setActiveTab('rebate')"
        >
          <div class="left">
            <a-skeleton
              :animation="true"
              v-if="userRechargeList.lineTabs.orderRebateAmount == null"
            >
              <a-skeleton-shape style="width: 30px; height: 30px" />
            </a-skeleton>
            <img v-else src="@/assets/lineicon5.png" alt="" />
          </div>
          <div class="right" v-if="userRechargeList.lineTabs.orderRebateAmount == null">
            <a-skeleton :animation="true">
              <a-skeleton-line
                :animation="true"
                :rows="3"
                :lineHeight="20"
                :widths="[60, 34, 110]"
                :lineSpacing="6"
              />
            </a-skeleton>
          </div>
          <div v-else class="right">
            <p class="addUser">新增返佣</p>
            <p class="nums">{{ userRechargeList.lineTabs.orderRebateAmount }}</p>
            <div class="oner">
              <span>返佣数量：</span>
              <span>{{ userRechargeList.lineTabs.orderRebateNumber }}个</span>
            </div>
          </div>
        </div> -->
        <div class="items" style="border: 0"></div>
        <div class="items" style="border: 0"></div>
      </div>
      <div
        style="display: flex; justify-content: space-between; align-items: center; margin-top: 20px"
      >
        <div
          id="orderLine_no"
          v-if="!userRechargeList.lineBoxListForm.line"
          style="width: 69%; height: 400px; box-sizing: border-box"
        >
          <a-skeleton :animation="true">
            <a-skeleton-line
              :animation="true"
              :rows="7"
              :lineHeight="35"
              :widths="['60%', '70%', '100%', '100%', '100%', '80%', '70%']"
              :lineSpacing="20"
            />
          </a-skeleton>
        </div>
        <div id="orderLine" style="width: 100%; height: 400px; box-sizing: border-box"></div>
      </div>
    </div>
    <!-- <div class="bottomTable" :style="{ width: '100%' }">
      <div class="contentBg box_3" style="width: 39%">
        <div class="tops">
          <span style="font-size: 16px"> 客户充值排名</span>
          <div class="times">
            <span
              :class="[activeDay == '今日' ? 'actives' : 'noactive']"
              @click="changeTime('今日', 1)"
              >今日</span
            ><span
              :class="[activeDay == '昨日' ? 'actives' : 'noactive']"
              @click="changeTime('昨日', 1)"
              >昨日</span
            ><span
              :class="[activeDay == '上月' ? 'actives' : 'noactive']"
              @click="changeTime('上月', 1)"
              >上月</span
            ><span
              :class="[activeDay == '本月' ? 'actives' : 'noactive']"
              @click="changeTime('本月', 1)"
              >本月</span
            >
          </div>
        </div>
        <div
          v-if="userRechargeList.list == null"
          style="width: 100%; height: auto; margin-top: 20px; box-sizing: border-box"
        >
          <a-skeleton :animation="true">
            <a-skeleton-line
              :animation="true"
              :rows="8"
              :lineHeight="25"
              :widths="['60%', '70%', '100%', '100%', '100%', '80%', '70%', '60%']"
              :lineSpacing="20"
            />
          </a-skeleton>
        </div>
        <TableBody v-else>
          <a-table :loading="tableLoading" :data="userRechargeList.list" :pagination="false">
            <template #columns>
              <a-table-column
                v-for="item of columns_userRecharge"
                :key="item.key"
                align="left"
                :title="(item.title as string)"
                :width="item.width"
                :data-index="(item.key as string)"
              >
                <template v-if="item.key === 'startTime'" #cell="{ record }">
                  <span>
                    {{ record.startTime + '-' + record.endTime }}
                  </span>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </TableBody>
      </div>
      <div class="contentBg box_3" style="width: 29%">
        <div class="tops">
          <span style="font-size: 16px"> 套餐充值排名</span>
          <div class="times">
            <span
              :class="[activeDay1 == '今日' ? 'actives' : 'noactive']"
              @click="changeTime('今日', 2)"
              >今日</span
            ><span
              :class="[activeDay1 == '昨日' ? 'actives' : 'noactive']"
              @click="changeTime('昨日', 2)"
              >昨日</span
            ><span
              :class="[activeDay1 == '上月' ? 'actives' : 'noactive']"
              @click="changeTime('上月', 2)"
              >上月</span
            ><span
              :class="[activeDay1 == '本月' ? 'actives' : 'noactive']"
              @click="changeTime('本月', 2)"
              >本月</span
            >
          </div>
        </div>
        <div
          v-if="userRechargeList.list1 == null"
          style="width: 100%; height: auto; margin-top: 20px; box-sizing: border-box"
        >
          <a-skeleton :animation="true">
            <a-skeleton-line
              :animation="true"
              :rows="8"
              :lineHeight="25"
              :widths="['60%', '70%', '100%', '100%', '100%', '80%', '70%', '60%']"
              :lineSpacing="20"
            />
          </a-skeleton>
        </div>
        <TableBody v-else>
          <a-table :loading="tableLoading1" :data="userRechargeList.list1" :pagination="false">
            <template #columns>
              <a-table-column
                v-for="item of columns_usermeal"
                :key="item.key"
                align="left"
                :title="(item.title as string)"
                :width="item.width"
                :data-index="(item.key as string)"
              >
                <template v-if="item.key === 'startTime'" #cell="{ record }">
                  <span>
                    {{ record.startTime + '-' + record.endTime }}
                  </span>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </TableBody>
      </div>
      <div class="contentBg box_3" style="width: 29%">
        <div class="tops">
          <span style="font-size: 16px"> 客户返佣排名</span>
          <div class="times">
            <span
              :class="[activeDay2 == '今日' ? 'actives' : 'noactive']"
              @click="changeTime('今日', 3)"
              >今日</span
            ><span
              :class="[activeDay2 == '昨日' ? 'actives' : 'noactive']"
              @click="changeTime('昨日', 3)"
              >昨日</span
            ><span
              :class="[activeDay2 == '上月' ? 'actives' : 'noactive']"
              @click="changeTime('上月', 3)"
              >上月</span
            ><span
              :class="[activeDay2 == '本月' ? 'actives' : 'noactive']"
              @click="changeTime('本月', 3)"
              >本月</span
            >
          </div>
        </div>
        <div
          v-if="userRechargeList.list2 == null"
          style="width: 100%; height: auto; margin-top: 20px; box-sizing: border-box"
        >
          <a-skeleton :animation="true">
            <a-skeleton-line
              :animation="true"
              :rows="8"
              :lineHeight="25"
              :widths="['60%', '70%', '100%', '100%', '100%', '80%', '70%', '60%']"
              :lineSpacing="20"
            />
          </a-skeleton>
        </div>
        <TableBody v-else>
          <a-table :loading="tableLoading2" :data="userRechargeList.list2" :pagination="false">
            <template #columns>
              <a-table-column
                v-for="item of columns_userfy"
                :key="item.key"
                align="left"
                :title="(item.title as string)"
                :width="item.width"
                :data-index="(item.key as string)"
              >
                <template v-if="item.key === 'startTime'" #cell="{ record }">
                  <span>
                    {{ record.startTime + '-' + record.endTime }}
                  </span>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </TableBody>
      </div>
    </div> -->
  </div>
</template>

<script lang="ts" setup>
  import * as echarts from 'echarts'
  import dayjs from 'dayjs'
  import {
    cardTong,
    userDetail,
    tabTong,
    userTop,
    mealTop,
    rebateTop,
    userLine,
    orderLine,
    cardLine,
    rebateLine,
    withdrawalLine,
  } from '@/api/user'
  import useAppConfigStore from '@/store/modules/app-config'
  import * as http from '@/api/http'
  import { useRouter } from 'vue-router'
  import { onMounted, ref, nextTick, watch } from 'vue'
  import { usePagination } from '@/hooks/table'
  import { reactive } from 'vue'
  //商城浏览
  const mallForm = ref({
    allPv: 0,
    allUv: 0,
    pv: 0,
    uv: 0,
  })
  function mallStatisticsFn() {
    fetch('/app/user/mall/log/statistics')
      .then((response) => response.json())
      .then((res) => {
        if (res.code !== 0) {
          mallForm.value = {
            allPv: 0,
            allUv: 0,
            pv: 0,
            uv: 0,
          }
        } else {
          mallForm.value = res.data
        }
      })
  }

  const appStore = useAppConfigStore()
  const pagination = usePagination(doRefresh)
  const pagination1 = usePagination(doRefresh1)
  const pagination2 = usePagination(doRefresh2)
  const homestaticsForm: any = ref({})
  const activeTab: any = ref('user')
  const router = useRouter()
  const themeColor = ref('light')
  const userRechargeList: any = reactive({
    list: null,
    list1: null,
    list2: null,
    lineBoxListForm: {},
    lineTabs: {},
    cardStateNum: null,
  })
  const activeDay = ref('今日')
  const activeDay1 = ref('今日')
  const activeDay2 = ref('今日')
  const activeDay3 = ref('今日')
  const timeForm = reactive({
    addTime: '',
    endTime: '',
  })
  const columns_userRecharge = [
    {
      title: '客户账号',
      dataIndex: 'name',
      key: 'name',
      ellipsis: true,
      tooltip: true,
      width: 100,
    },
    {
      title: '订单数量',
      dataIndex: 'orderNumber',
      key: 'orderNumber',
      width: 80,
    },
    {
      title: '订单总额',
      dataIndex: 'orderAmount',
      key: 'orderAmount',
      width: 80,
    },
    // {
    //   title: '激活数量',
    //   dataIndex: 'cardActivation',
    //   key: 'cardActivation',
    //   width: 80,
    // },
  ]
  const columns_usermeal = [
    {
      title: '套餐名称',
      dataIndex: 'name',
      key: 'name',
      ellipsis: true,
      tooltip: true,
      width: 100,
    },
    {
      title: '充值数量',
      dataIndex: 'orderNumber',
      key: 'orderNumber',
      width: 80,
    },
    {
      title: '充值总额',
      dataIndex: 'orderAmount',
      key: 'orderAmount',
      width: 80,
    },
  ]
  const columns_userfy = [
    {
      title: '客户账号',
      dataIndex: 'name',
      key: 'name',
      ellipsis: true,
      tooltip: true,
      width: 100,
    },
    {
      title: '返佣金额',
      dataIndex: 'orderRebateAmount',
      key: 'orderRebateAmount',
      width: 80,
    },
  ]
  // const showCard
  const setActiveTab = (item: any) => {
    activeTab.value = item
    if (item == 'order') {
      getOrder()
    } else if (item == 'user') {
      getUserLines()
    } else if (item == 'draw') {
      getDrawLines()
    } else if (item == 'rebate') {
      getRebateData()
    } else if (item == 'card') {
      getCardLineData()
    }
  }
  const getOrderLine = () => {
    const orderNumber: any = []
    const orderAmount: any = []
    const orderRefundAmount: any = []
    const orderRefundNumber: any = []
    const orderTimes: any = []
    userRechargeList.lineBoxListForm.line.forEach((item_order: any) => {
      if (item_order.orderNumber || item_order.orderNumber === 0) {
        orderNumber.push(item_order.orderNumber)
      }
      if (item_order.orderAmount || item_order.orderAmount === 0) {
        orderAmount.push(item_order.orderAmount)
      }
      if (item_order.orderRefundAmount || item_order.orderRefundAmount === 0) {
        orderRefundAmount.push(item_order.orderRefundAmount)
      }
      if (item_order.orderRefundNumber || item_order.orderRefundNumber === 0) {
        orderRefundNumber.push(item_order.orderRefundNumber)
      }
      if (item_order.name || item_order.name === 0) {
        orderTimes.push(item_order.name)
      }
    })
    var chartDom: any = document.getElementById('orderLine')
    chartDom.removeAttribute('_echarts_instance_') //解决切换页面echarts不显示的问题
    var myChart = echarts.init(chartDom)
    var option
    option = {
      // title: {
      //   text: 'Stacked Line',
      // },
      color: ['#3491fa', '#00B42A', '#F7BA1E', '#F53F3F'],
      legend: {
        data: ['订单数量', '订单金额', '退款数量', '退款金额'],
        textStyle: {
          color: themeColor.value == 'dark' ? '#fff' : '#000',
        },
      },
      grid: {
        top: '5%',
        left: '2%',
        right: '5%',
        bottom: '4%',
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: orderTimes,
        axisLine: {
          lineStyle: {
            color: 'rgb(242, 243, 245)', // 这里将X轴线的颜色设为红色
          },
        },
        axisLabel: {
          textStyle: {
            color: themeColor.value == 'dark' ? '#fff' : '#000', // 这里将x轴文字颜色设为红色
          },
        },
      },
      yAxis: {
        type: 'value',
        splitLine: { show: true },
        axisLabel: {
          textStyle: {
            color: themeColor.value == 'dark' ? '#fff' : '', // 这里将x轴文字颜色设为红色
          },
        },
      },
      series: [
        {
          name: '订单数量',
          type: 'line',
          smooth: true,
          data: orderNumber,
          symbol: 'none',
          areaStyle: {
            color: {
              type: 'linear',
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: '#3491fa', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#E8F7FF', // 100% 处的颜色
                },
              ],
            },
          },
        },
        {
          name: '订单金额',
          type: 'line',
          smooth: true,
          data: orderAmount,
          symbol: 'none',
          areaStyle: {
            color: {
              type: 'linear',
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: '#00B42A', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#E8FFEA', // 100% 处的颜色
                },
              ],
            },
          },
        },
        {
          name: '退款数量',
          type: 'line',
          smooth: true,
          data: orderRefundNumber,
          symbol: 'none',
          areaStyle: {
            color: {
              type: 'linear',
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: '#F7BA1E', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#FFFCE8', // 100% 处的颜色
                },
              ],
            },
          },
        },
        {
          name: '退款金额',
          type: 'line',
          smooth: true,
          data: orderRefundAmount,
          symbol: 'none',
          areaStyle: {
            color: {
              type: 'linear',
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: '#F53F3F', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#FFECE8', // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    }
    option && myChart.setOption(option)
  }

  const getOrderLineUser = () => {
    const userGradeNumber1List: any = []
    const userGradeNumber2List: any = []
    const userGradeNumber3List: any = []
    const userGradeNumber4List: any = []
    const orderTimes: any = []
    userRechargeList.lineBoxListForm.line.forEach((item_order: any) => {
      if (item_order.userGradeNumberOther || item_order.userGradeNumberOther === 0) {
        userGradeNumber4List.push(item_order.userGradeNumberOther)
      }
      if (item_order.name || item_order.name === 0) {
        orderTimes.push(item_order.name)
      }
    })
    var chartDom: any = document.getElementById('orderLine')
    chartDom.removeAttribute('_echarts_instance_') //解决切换页面echarts不显示的问题
    var myChart = echarts.init(chartDom)
    var option
    option = {
      // title: {
      //   text: 'Stacked Line',
      // },
      color: ['#3491fa', '#00B42A', '#F7BA1E', '#F53F3F'],
      legend: {
        data: ['一级客户', '二级客户', '三级客户', '其他客户'],
        itemHeight: 10,
        textStyle: {
          color: themeColor.value == 'dark' ? '#fff' : '#000',
        },
      },
      grid: {
        top: '10%',
        left: '2%',
        right: '5%',
        bottom: '4%',
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: orderTimes,
        axisLine: {
          lineStyle: {
            color: 'rgb(242, 243, 245)', // 这里将X轴线的颜色设为红色
          },
        },
        axisLabel: {
          textStyle: {
            color: themeColor.value == 'dark' ? '#fff' : '#000', // 这里将x轴文字颜色设为红色
          },
        },
      },
      yAxis: {
        type: 'value',
        splitLine: { show: true },
        axisLabel: {
          textStyle: {
            color: themeColor.value == 'dark' ? '#fff' : '', // 这里将x轴文字颜色设为红色
          },
        },
      },
      series: [
        {
          name: '新增客户',
          type: 'line',
          smooth: true,
          data: userGradeNumber4List,
          symbol: 'none',
          areaStyle: {
            color: {
              type: 'linear',
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: '#3491fa', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#E8F7FF', // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    }
    option && myChart.setOption(option)
  }

  const getOrderLineDraw = () => {
    const userGradeNumber1List: any = []
    const userGradeNumber2List: any = []
    const orderTimes: any = []
    userRechargeList.lineBoxListForm.line.forEach((item_order: any) => {
      if (item_order.withdrawalNumber || item_order.withdrawalNumber === 0) {
        userGradeNumber1List.push(item_order.withdrawalNumber)
      }
      if (item_order.withdrawalAmount || item_order.withdrawalAmount === 0) {
        userGradeNumber2List.push(item_order.withdrawalAmount)
      }
      if (item_order.name || item_order.name === 0) {
        orderTimes.push(item_order.name)
      }
    })
    var chartDom: any = document.getElementById('orderLine')
    chartDom.removeAttribute('_echarts_instance_') //解决切换页面echarts不显示的问题
    var myChart = echarts.init(chartDom)
    var option
    option = {
      // title: {
      //   text: 'Stacked Line',
      // },
      color: ['#3491fa', '#00B42A', '#F7BA1E', '#F53F3F'],
      legend: {
        data: ['提现数量', '提现金额'],
        textStyle: {
          color: themeColor.value == 'dark' ? '#fff' : '#000',
        },
      },
      grid: {
        top: '10%',
        left: '2%',
        right: '5%',
        bottom: '4%',
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: orderTimes,
        axisLine: {
          lineStyle: {
            color: 'rgb(242, 243, 245)', // 这里将X轴线的颜色设为红色
          },
        },
        axisLabel: {
          textStyle: {
            color: themeColor.value == 'dark' ? '#fff' : '#000', // 这里将x轴文字颜色设为红色
          },
        },
      },
      yAxis: {
        type: 'value',
        splitLine: { show: true },
        axisLabel: {
          textStyle: {
            color: themeColor.value == 'dark' ? '#fff' : '', // 这里将x轴文字颜色设为红色
          },
        },
      },
      series: [
        {
          name: '提现数量',
          type: 'line',
          smooth: true,
          data: userGradeNumber1List,
          symbol: 'none',
          areaStyle: {
            color: {
              type: 'linear',
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: '#3491fa', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#E8F7FF', // 100% 处的颜色
                },
              ],
            },
          },
        },
        {
          name: '提现金额',
          type: 'line',
          smooth: true,
          data: userGradeNumber2List,
          symbol: 'none',
          areaStyle: {
            color: {
              type: 'linear',
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: '#00B42A', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#E8FFEA', // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    }
    option && myChart.setOption(option)
  }

  const getOrderLineBalance = () => {
    const userGradeNumber1List: any = []
    const userGradeNumber2List: any = []
    const orderTimes: any = []
    userRechargeList.lineBoxListForm.line.forEach((item_order: any) => {
      if (item_order.cardBalanceRechargeAmount || item_order.cardBalanceRechargeAmount === 0) {
        userGradeNumber2List.push(item_order.cardBalanceRechargeAmount)
      }
      if (item_order.cardBalanceRechargeNumber || item_order.cardBalanceRechargeNumber === 0) {
        userGradeNumber1List.push(item_order.cardBalanceRechargeNumber)
      }
      if (item_order.name || item_order.name === 0) {
        orderTimes.push(item_order.name)
      }
    })
    var chartDom: any = document.getElementById('orderLine')
    chartDom.removeAttribute('_echarts_instance_') //解决切换页面echarts不显示的问题
    var myChart = echarts.init(chartDom)
    var option
    option = {
      // title: {
      //   text: 'Stacked Line',
      // },
      color: ['#3491fa', '#00B42A', '#F7BA1E', '#F53F3F'],
      legend: {
        data: ['预存数量', '预存金额'],
        textStyle: {
          color: themeColor.value == 'dark' ? '#fff' : '#000',
        },
      },
      grid: {
        top: '10%',
        left: '2%',
        right: '5%',
        bottom: '4%',
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: orderTimes,
        axisLine: {
          lineStyle: {
            color: 'rgb(242, 243, 245)', // 这里将X轴线的颜色设为红色
          },
        },
        axisLabel: {
          textStyle: {
            color: themeColor.value == 'dark' ? '#fff' : '#000', // 这里将x轴文字颜色设为红色
          },
        },
      },
      yAxis: {
        type: 'value',
        splitLine: { show: true },
        axisLabel: {
          textStyle: {
            color: themeColor.value == 'dark' ? '#fff' : '', // 这里将x轴文字颜色设为红色
          },
        },
      },
      series: [
        {
          name: '预存数量',
          type: 'line',
          smooth: true,
          data: userGradeNumber1List,
        },
        {
          name: '预存金额',
          type: 'line',
          smooth: true,
          data: userGradeNumber2List,
        },
      ],
    }
    option && myChart.setOption(option)
  }

  const getOrderLineRebate = () => {
    const userGradeNumber1List: any = []
    const userGradeNumber2List: any = []
    const orderTimes: any = []
    userRechargeList.lineBoxListForm.line.forEach((item_order: any) => {
      if (item_order.orderRebateNumber || item_order.orderRebateNumber === 0) {
        userGradeNumber1List.push(item_order.orderRebateNumber)
      }
      if (item_order.orderRebateAmount || item_order.orderRebateAmount === 0) {
        userGradeNumber2List.push(item_order.orderRebateAmount)
      }
      if (item_order.name || item_order.name === 0) {
        orderTimes.push(item_order.name)
      }
    })
    var chartDom: any = document.getElementById('orderLine')
    chartDom.removeAttribute('_echarts_instance_') //解决切换页面echarts不显示的问题
    var myChart = echarts.init(chartDom)
    var option
    option = {
      // title: {
      //   text: 'Stacked Line',
      // },
      color: ['#3491fa', '#00B42A', '#F7BA1E', '#F53F3F'],
      legend: {
        data: ['返佣数量', '返佣金额'],
        textStyle: {
          color: themeColor.value == 'dark' ? '#fff' : '#000',
        },
      },
      grid: {
        top: '10%',
        left: '2%',
        right: '5%',
        bottom: '4%',
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: orderTimes,
        axisLine: {
          lineStyle: {
            color: 'rgb(242, 243, 245)', // 这里将X轴线的颜色设为红色
          },
        },
        axisLabel: {
          textStyle: {
            color: themeColor.value == 'dark' ? '#fff' : '#000', // 这里将x轴文字颜色设为红色
          },
        },
      },
      yAxis: {
        type: 'value',
        splitLine: { show: true },
        axisLabel: {
          textStyle: {
            color: themeColor.value == 'dark' ? '#fff' : '', // 这里将x轴文字颜色设为红色
          },
        },
      },
      series: [
        {
          name: '返佣数量',
          type: 'line',
          smooth: true,
          data: userGradeNumber1List,
        },
        {
          name: '返佣金额',
          type: 'line',
          smooth: true,
          data: userGradeNumber2List,
        },
      ],
    }
    option && myChart.setOption(option)
  }

  const getOrderLineCard = () => {
    const orderNumber: any = []
    const orderAmount: any = []
    const orderRefundAmount: any = []
    const orderRefundNumber: any = []
    const orderTimes: any = []
    userRechargeList.lineBoxListForm.line.forEach((item_order: any) => {
      if (item_order.num || item_order.num === 0) {
        orderNumber.push(item_order.num)
      }
      if (item_order.cardSystemActivation || item_order.cardSystemActivation === 0) {
        orderAmount.push(item_order.cardSystemActivation)
      }
      if (item_order.cardActivation || item_order.cardActivation === 0) {
        orderRefundAmount.push(item_order.cardActivation)
      }
      if (item_order.cardSystemActivation || item_order.cardSystemActivation === 0) {
        orderRefundNumber.push(item_order.cardSystemActivation)
      }
      if (item_order.name || item_order.name === 0) {
        orderTimes.push(item_order.name)
      }
    })
    var chartDoms: any = document.getElementById('orderLine')
    chartDoms.removeAttribute('_echarts_instance_') //解决切换页面echarts不显示的问题
    var myChart = echarts.init(chartDoms)
    var option
    option = {
      // title: {
      //   text: 'Stacked Line',
      // },
      color: ['#3491fa', '#00B42A', '#F7BA1E', '#F53F3F'],
      legend: {
        data: ['激活数量', '直属激活', '非直属激活'],
        textStyle: {
          color: themeColor.value == 'dark' ? '#fff' : '#000',
        },
      },
      grid: {
        top: '10%',
        left: '2%',
        right: '5%',
        bottom: '4%',
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: orderTimes,
        axisLine: {
          lineStyle: {
            color: 'rgb(242, 243, 245)', // 这里将X轴线的颜色设为红色
          },
        },
        axisLabel: {
          textStyle: {
            color: themeColor.value == 'dark' ? '#fff' : '#000', // 这里将x轴文字颜色设为红色
          },
        },
      },
      yAxis: {
        type: 'value',
        splitLine: { show: true },
        axisLabel: {
          textStyle: {
            color: themeColor.value == 'dark' ? '#fff' : '', // 这里将x轴文字颜色设为红色
          },
        },
      },
      series: [
        {
          name: '激活数量',
          type: 'line',
          smooth: true,
          data: orderRefundNumber,
          symbol: 'none',
          areaStyle: {
            color: {
              type: 'linear',
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: '#3491fa', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#E8F7FF', // 100% 处的颜色
                },
              ],
            },
          },
        },
        {
          name: '直属激活',
          type: 'line',
          smooth: true,
          data: orderAmount,
          symbol: 'none',
          areaStyle: {
            color: {
              type: 'linear',
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: '#00B42A', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#E8FFEA', // 100% 处的颜色
                },
              ],
            },
          },
        },
        {
          name: '非直属激活',
          type: 'line',
          smooth: true,
          data: orderNumber,
          symbol: 'none',
          areaStyle: {
            color: {
              type: 'linear',
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: '#F7BA1E', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#FFFCE8', // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    }
    option && myChart.setOption(option)
  }

  const getPayTypeListCardState = () => {
    const list = [
      { name: '库存', value: 0 },
      { name: '待激活', value: 0 },
      { name: '已激活', value: 0 },
      { name: '已停机', value: 0 },
      { name: '其他状态', value: 0 },
    ]
    list.filter(function (items: any) {
      userRechargeList.cardStateNum.filter(function (item_card: any) {
        if (item_card.name == items.name) {
          items.value = item_card.cardNumber
        }
      })
    })
    // 使用filter()函数进行过滤
    const resultArray = userRechargeList.cardStateNum.filter(function (obj) {
      return !list.some(function (item) {
        return item.name === obj.name
      })
    })
    console.log(resultArray)

    resultArray.forEach((item_card: any) => {
      list[4].value += item_card.cardNumber
    })
    var chartDom = document.getElementById('cardNum')
    chartDom.removeAttribute('_echarts_instance_') //解决切换页面echarts不显示的问题
    var myChart = echarts.init(chartDom)
    var option
    option = {
      tooltip: {
        trigger: 'item',
      },
      grid: {
        top: '5%',
        left: '2%',
        right: '2%',
        bottom: '4%',
        containLabel: true,
      },
      legend: {
        left: '50%',
        itemHeight: 10,
        itemGap: 20,
        textStyle: {
          fontSize: 13,
          color: themeColor.value == 'dark' ? '#fff' : '#000',
        },
        y: 'center',
        icon: 'circle',
        orient: 'vertical',
        formatter: function (name: any) {
          var newAmount = list.filter(function (item: any) {
            return item.name == name
          })
          var arr = [name, newAmount[0].value + '张']
          if (arr[0].length == 2) {
            return arr.join('         ')
          } else if (arr[0].length == 3) {
            return arr.join('      ')
          } else if (arr[0].length == 4) {
            return arr.join('   ')
          }
        },
      },
      series: [
        {
          name: '卡板数据',
          type: 'pie',
          minAngle: 50,
          center: ['25%', '50%'],
          radius: ['45%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center',
            formatter: (params) => {
              return params.name
            },
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 16,
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: list,
          itemStyle: {
            // 在这里进行样式配置
            color: function (params: any) {
              // 自定义每个数据项的颜色
              var colorList = ['#86909C', '#9FDB1D', '#3491FA', '#F53F3F', '#FADC19'] // 自定义颜色列表
              return colorList[params.dataIndex]
            },
          },
        },
      ],
    }

    option && myChart.setOption(option)
  }
  const getLineTabData = () => {
    http
      .get({
        url: tabTong,
        data: () => {
          return { ...timeForm }
        },
      })
      .then((res) => {
        userRechargeList.lineTabs = res.data
      })
  }

  const gettongjis = () => {
    http
      .get({
        url: cardTong,
        data: () => {
          return {}
        },
      })
      .then((res) => {
        homestaticsForm.value = res.data
      })
  }
  const gotoRoutes = (item: any) => {
    router.push({ path: item })
  }
  const gotoHandle = () => {
    router.push({ path: '/children/log/login' })
  }
  const changeTime = (item1: any, item2: any) => {
    if (item1 == '今日') {
      timeForm.addTime = dayjs('00:00:00', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
      timeForm.endTime = dayjs('23:59:59', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
    } else if (item1 == '昨日') {
      timeForm.addTime = dayjs('00:00:00', 'HH:mm:ss')
        .subtract(1, 'day')
        .format('YYYY-MM-DD HH:mm:ss')
      timeForm.endTime = dayjs('23:59:59', 'HH:mm:ss')
        .subtract(1, 'day')
        .format('YYYY-MM-DD HH:mm:ss')
    } else if (item1 == '上月') {
      timeForm.addTime = dayjs('00:00:00', 'HH:mm:ss')
        .subtract(1, 'month')
        .format('YYYY-MM-DD HH:mm:ss')
      timeForm.endTime = dayjs().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
    } else if (item1 == '本月') {
      timeForm.addTime = dayjs('01 00:00:00', 'DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
      timeForm.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
    } else if (item1 == '近七日') {
      timeForm.addTime = dayjs('00:00:00', 'HH:mm:ss')
        .subtract(6, 'day')
        .format('YYYY-MM-DD HH:mm:ss')
      timeForm.endTime = dayjs('23:59:59', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
    } else if (item1 == '近三十日') {
      timeForm.addTime = dayjs('00:00:00', 'HH:mm:ss')
        .subtract(29, 'day')
        .format('YYYY-MM-DD HH:mm:ss')
      timeForm.endTime = dayjs('23:59:59', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
    }
    if (item2 == 1) {
      activeDay.value = item1
      doRefresh()
    } else if (item2 == 2) {
      activeDay1.value = item1
      doRefresh1()
    } else if (item2 == 3) {
      activeDay2.value = item1
      doRefresh2()
    } else if (item2 == 4) {
      activeDay3.value = item1
      getLineTabData()
      if (activeTab.value == 'order') {
        getOrder()
      } else if (activeTab.value == 'user') {
        getUserLines()
      } else if (activeTab.value == 'draw') {
        getDrawLines()
      } else if (activeTab.value == 'rebate') {
        getRebateData()
      } else if (activeTab.value == 'card') {
        getCardLineData()
      }
    }
  }
  function onOk(dateString: any) {
    timeForm.addTime = dateString[0]
    timeForm.endTime = dateString[1]
    if (activeTab.value == 'order') {
      getOrder()
    } else if (activeTab.value == 'user') {
      getUserLines()
    } else if (activeTab.value == 'draw') {
      getDrawLines()
    } else if (activeTab.value == 'rebate') {
      getRebateData()
    } else if (activeTab.value == 'card') {
      getCardLineData()
    }
  }
  const tableLoading = ref(false)
  const tableLoading1 = ref(false)
  const tableLoading2 = ref(false)
  const getCardLineData = () => {
    http
      .get({
        url: cardLine,
        data: () => {
          return { ...timeForm }
        },
      })
      .then((res: any) => {
        res.data.line = addDay(res.data.line, activeDay3.value)
        userRechargeList.lineBoxListForm = res.data
        getOrderLineCard()
      })
      .catch(console.log)
  }
  const getRebateData = () => {
    http
      .get({
        url: rebateLine,
        data: () => {
          return { ...timeForm }
        },
      })
      .then((res: any) => {
        res.data.line = addDay(res.data.line, activeDay3.value)
        userRechargeList.lineBoxListForm = res.data
        getOrderLineRebate()
      })
      .catch(console.log)
  }
  function getDrawLines() {
    http
      .get({
        url: withdrawalLine,
        data: () => {
          return { ...timeForm }
        },
      })
      .then((res: any) => {
        res.data.line = addDay(res.data.line, activeDay3.value)
        userRechargeList.lineBoxListForm = res.data
        getOrderLineDraw()
      })
      .catch(console.log)
  }
  function getUserLines() {
    http
      .get({
        url: userLine,
        data: () => {
          return { ...timeForm }
        },
      })
      .then((res: any) => {
        res.data.line = addDay(res.data.line, activeDay3.value)
        userRechargeList.lineBoxListForm = res.data
        nextTick(() => {
          getOrderLineUser()
        })
      })
      .catch(console.log)
  }
  function getOrder() {
    http
      .get({
        url: orderLine,
        data: () => {
          return { ...timeForm }
        },
      })
      .then((res: any) => {
        res.data.line = addDay(res.data.line, activeDay3.value)
        userRechargeList.lineBoxListForm = res.data
        getOrderLine()
      })
      .catch(console.log)
  }
  function doRefresh() {
    tableLoading.value = true
    http
      .get({
        url: userTop,
        data: () => {
          return { ...timeForm, page: pagination.page, size: pagination.pageSize }
        },
      })
      .then((res: any) => {
        tableLoading.value = false
        userRechargeList.list = res.data.list
      })
      .catch(console.log)
  }
  function doRefresh1() {
    tableLoading1.value = true
    http
      .get({
        url: mealTop,
        data: () => {
          return { ...timeForm, page: pagination.page, size: pagination.pageSize }
        },
      })
      .then((res: any) => {
        tableLoading1.value = false
        userRechargeList.list1 = res.data.list
      })
      .catch(console.log)
  }
  function doRefresh2() {
    tableLoading2.value = true
    http
      .get({
        url: rebateTop,
        data: () => {
          return { ...timeForm, page: pagination.page, size: pagination.pageSize }
        },
      })
      .then((res: any) => {
        tableLoading2.value = false
        userRechargeList.list2 = res.data.list
      })
      .catch(console.log)
  }

  watch(
    () => appStore.theme,
    (newVal) => {
      console.log(appStore.theme)
      themeColor.value = newVal
      getPayTypeListCardState()
      if (activeTab.value == 'order') {
        getOrderLine()
      } else if (activeTab.value == 'user') {
        getOrderLineUser()
      } else if (activeTab.value == 'draw') {
        getOrderLineDraw()
      } else if (activeTab.value == 'balance') {
        getOrderLineBalance()
      } else if (activeTab.value == 'rebate') {
        getOrderLineRebate()
      } else if (activeTab.value == 'card') {
        getOrderLineCard()
      }
    }
  )
  const userForm = ref({ session: {} })
  const userDetailFn = () => {
    http
      .get({
        url: userDetail,
        data: {},
      })
      .then((res) => {
        if (res.code == 0) {
          userForm.value = res.data
        }
      })
  }
  function addDay(val: any, val1: any) {
    let date = new Date()
    var list: any = []
    if (val1 == '今日') {
      const hour = date.getHours()
      if (activeTab.value == 'user') {
        for (var i = 0; i <= hour; i++) {
          if (i < 10) {
            let num = ''
            num = '0' + i + ':00'
            list.push({
              name: num,
              userGradeNumberOther: 0,
            })
          } else {
            list.push({
              name: i + ':00',
              userGradeNumberOther: 0,
            })
          }
        }
      } else if (activeTab.value == 'order') {
        for (var i = 0; i <= hour; i++) {
          if (i < 10) {
            let num = ''
            num = '0' + i + ':00'
            list.push({
              name: num,
              orderAmount: 0,
              orderNumber: 0,
              orderRefundAmount: 0,
              orderRefundNumber: 0,
            })
          } else {
            list.push({
              name: i + ':00',
              orderAmount: 0,
              orderNumber: 0,
              orderRefundAmount: 0,
              orderRefundNumber: 0,
            })
          }
        }
      } else if (activeTab.value == 'card') {
        for (var i = 0; i <= hour; i++) {
          if (i < 10) {
            let num = ''
            num = '0' + i + ':00'
            list.push({
              name: num,
              cardActivation: 0,
              cardSystemActivation: 0,
              num: 0,
            })
          } else {
            list.push({
              name: i + ':00',
              cardActivation: 0,
              cardSystemActivation: 0,
              num: 0,
            })
          }
        }
      } else if (activeTab.value == 'rebate') {
        for (var i = 0; i <= hour; i++) {
          if (i < 10) {
            let num = ''
            num = '0' + i + ':00'
            list.push({
              name: num,
              orderRebateAmount: 0,
              orderRebateNumber: 0,
            })
          } else {
            list.push({
              name: i + ':00',
              orderRebateAmount: 0,
              orderRebateNumber: 0,
            })
          }
        }
      } else if (activeTab.value == 'draw') {
        for (var i = 0; i <= hour; i++) {
          if (i < 10) {
            let num = ''
            num = '0' + i + ':00'
            list.push({
              name: num,
              withdrawalAmount: 0,
              withdrawalNumber: 0,
            })
          } else {
            list.push({
              name: i + ':00',
              withdrawalAmount: 0,
              withdrawalNumber: 0,
            })
          }
        }
      } else if (activeTab.value == 'balance') {
        for (var i = 0; i <= hour; i++) {
          if (i < 10) {
            let num = ''
            num = '0' + i + ':00'
            list.push({
              name: num,
              cardBalanceRechargeAmount: 0,
              cardBalanceRechargeNumber: 0,
            })
          } else {
            list.push({
              name: i + ':00',
              cardBalanceRechargeAmount: 0,
              cardBalanceRechargeNumber: 0,
            })
          }
        }
      }
    } else if (val1 == '昨日') {
      if (activeTab.value == 'user') {
        for (var i = 0; i <= 23; i++) {
          if (i < 10) {
            let num = ''
            num = '0' + i + ':00'
            list.push({
              name: num,
              userGradeNumberOther: 0,
            })
          } else {
            list.push({
              name: i + ':00',
              userGradeNumberOther: 0,
            })
          }
        }
      } else if (activeTab.value == 'order') {
        for (var i = 0; i <= 23; i++) {
          if (i < 10) {
            let num = ''
            num = '0' + i + ':00'
            list.push({
              name: num,
              orderAmount: 0,
              orderNumber: 0,
              orderRefundAmount: 0,
              orderRefundNumber: 0,
            })
          } else {
            list.push({
              name: i + ':00',
              orderAmount: 0,
              orderNumber: 0,
              orderRefundAmount: 0,
              orderRefundNumber: 0,
            })
          }
        }
      } else if (activeTab.value == 'card') {
        for (var i = 0; i <= 23; i++) {
          if (i < 10) {
            let num = ''
            num = '0' + i + ':00'
            list.push({
              name: num,
              cardActivation: 0,
              cardSystemActivation: 0,
              num: 0,
            })
          } else {
            list.push({
              name: i + ':00',
              cardActivation: 0,
              cardSystemActivation: 0,
              num: 0,
            })
          }
        }
      } else if (activeTab.value == 'rebate') {
        for (var i = 0; i <= 23; i++) {
          if (i < 10) {
            let num = ''
            num = '0' + i + ':00'
            list.push({
              name: num,
              orderRebateAmount: 0,
              orderRebateNumber: 0,
            })
          } else {
            list.push({
              name: i + ':00',
              orderRebateAmount: 0,
              orderRebateNumber: 0,
            })
          }
        }
      } else if (activeTab.value == 'draw') {
        for (var i = 0; i <= 23; i++) {
          if (i < 10) {
            let num = ''
            num = '0' + i + ':00'
            list.push({
              name: num,
              withdrawalAmount: 0,
              withdrawalNumber: 0,
            })
          } else {
            list.push({
              name: i + ':00',
              withdrawalAmount: 0,
              withdrawalNumber: 0,
            })
          }
        }
      } else if (activeTab.value == 'balance') {
        for (var i = 0; i <= 23; i++) {
          if (i < 10) {
            let num = ''
            num = '0' + i + ':00'
            list.push({
              name: num,
              cardBalanceRechargeAmount: 0,
              cardBalanceRechargeNumber: 0,
            })
          } else {
            list.push({
              name: i + ':00',
              cardBalanceRechargeAmount: 0,
              cardBalanceRechargeNumber: 0,
            })
          }
        }
      }
    } else if (val1 == '上月') {
      val.forEach((item: any) => {
        item.name = item.name.slice(5, 10)
      })
      const today = new Date()
      let year = today.getFullYear()
      let month: any = today.getMonth() // 0-11 表示1-12月
      if (month === 0) {
        month = 12
        year--
      }
      const lastMonth = new Date(year, month, 0)
      if (activeTab.value == 'user') {
        for (var i = 1; i <= lastMonth.getDate(); i++) {
          if (month + 1 < 10) {
            month = '0' + month
          }
          if (i < 10) {
            i = '0' + i
          }
          list.push({
            name: month + '-' + i,
            userGradeNumberOther: 0,
          })
        }
      } else if (activeTab.value == 'order') {
        for (var i = 1; i <= lastMonth.getDate(); i++) {
          if (month + 1 < 10) {
            month = '0' + month
          }
          if (i < 10) {
            i = '0' + i
          }
          list.push({
            name: month + '-' + i,
            orderAmount: 0,
            orderNumber: 0,
            orderRefundAmount: 0,
            orderRefundNumber: 0,
          })
        }
      } else if (activeTab.value == 'card') {
        for (var i = 1; i <= lastMonth.getDate(); i++) {
          if (month + 1 < 10) {
            month = '0' + month
          }
          if (i < 10) {
            i = '0' + i
          }
          list.push({
            name: month + '-' + i,
            cardActivation: 0,
            cardSystemActivation: 0,
            num: 0,
          })
        }
      } else if (activeTab.value == 'rebate') {
        for (var i = 1; i <= lastMonth.getDate(); i++) {
          if (month + 1 < 10) {
            month = '0' + month
          }
          if (i < 10) {
            i = '0' + i
          }
          list.push({
            name: month + '-' + i,
            orderRebateAmount: 0,
            orderRebateNumber: 0,
          })
        }
      } else if (activeTab.value == 'draw') {
        for (var i = 1; i <= lastMonth.getDate(); i++) {
          if (month + 1 < 10) {
            month = '0' + month
          }
          if (i < 10) {
            i = '0' + i
          }
          list.push({
            name: month + '-' + i,
            withdrawalAmount: 0,
            withdrawalNumber: 0,
          })
        }
      } else if (activeTab.value == 'balance') {
        for (var i = 1; i <= lastMonth.getDate(); i++) {
          if (month + 1 < 10) {
            month = '0' + month
          }
          if (i < 10) {
            i = '0' + i
          }
          list.push({
            name: month + '-' + i,
            cardBalanceRechargeAmount: 0,
            cardBalanceRechargeNumber: 0,
          })
        }
      }
    } else if (val1 == '本月') {
      val.forEach((item: any) => {
        item.name = item.name.slice(5, 10)
      })
      const today = new Date()
      const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1)
      const dateRange = []
      if (activeTab.value == 'user') {
        while (today >= startOfMonth) {
          dateRange.push({
            name: new Date(today).toISOString().split('T')[0].slice(5, 10),
            userGradeNumberOther: 0,
          })
          today.setDate(today.getDate() - 1)
        }
      } else if (activeTab.value == 'order') {
        while (today >= startOfMonth) {
          dateRange.push({
            name: new Date(today).toISOString().split('T')[0].slice(5, 10),
            orderAmount: 0,
            orderNumber: 0,
            orderRefundAmount: 0,
            orderRefundNumber: 0,
          })
          today.setDate(today.getDate() - 1)
        }
      } else if (activeTab.value == 'card') {
        while (today >= startOfMonth) {
          dateRange.push({
            name: new Date(today).toISOString().split('T')[0].slice(5, 10),
            cardActivation: 0,
            cardSystemActivation: 0,
            num: 0,
          })
          today.setDate(today.getDate() - 1)
        }
      } else if (activeTab.value == 'rebate') {
        while (today >= startOfMonth) {
          dateRange.push({
            name: new Date(today).toISOString().split('T')[0].slice(5, 10),
            orderRebateAmount: 0,
            orderRebateNumber: 0,
          })
          today.setDate(today.getDate() - 1)
        }
      } else if (activeTab.value == 'draw') {
        while (today >= startOfMonth) {
          dateRange.push({
            name: new Date(today).toISOString().split('T')[0].slice(5, 10),
            withdrawalAmount: 0,
            withdrawalNumber: 0,
          })
          today.setDate(today.getDate() - 1)
        }
      } else if (activeTab.value == 'balance') {
        while (today >= startOfMonth) {
          dateRange.push({
            name: new Date(today).toISOString().split('T')[0].slice(5, 10),
            cardBalanceRechargeAmount: 0,
            cardBalanceRechargeNumber: 0,
          })
          today.setDate(today.getDate() - 1)
        }
      }

      // 反转数组以得到正确的顺序
      list = dateRange.reverse()
    } else if (val1 == '近三十日') {
      val.forEach((item: any) => {
        item.name = item.name.slice(5, 10)
      })
      if (activeTab.value == 'user') {
        for (let i = 29; i >= 0; i--) {
          const dates = new Date(date)
          dates.setDate(dates.getDate() - i)
          const dateString = dates.toISOString().split('T')[0] // Format as YYYY-MM-DD
          list.push({
            name: dateString.slice(5, 10),
            userGradeNumberOther: 0,
          })
        }
      } else if (activeTab.value == 'order') {
        for (let i = 29; i >= 0; i--) {
          const dates = new Date(date)
          dates.setDate(dates.getDate() - i)
          const dateString = dates.toISOString().split('T')[0] // Format as YYYY-MM-DD
          list.push({
            name: dateString.slice(5, 10),
            orderAmount: 0,
            orderNumber: 0,
            orderRefundAmount: 0,
            orderRefundNumber: 0,
          })
        }
      } else if (activeTab.value == 'card') {
        for (let i = 29; i >= 0; i--) {
          const dates = new Date(date)
          dates.setDate(dates.getDate() - i)
          const dateString = dates.toISOString().split('T')[0] // Format as YYYY-MM-DD
          list.push({
            name: dateString.slice(5, 10),
            cardActivation: 0,
            cardSystemActivation: 0,
            num: 0,
          })
        }
      } else if (activeTab.value == 'rebate') {
        for (let i = 29; i >= 0; i--) {
          const dates = new Date(date)
          dates.setDate(dates.getDate() - i)
          const dateString = dates.toISOString().split('T')[0] // Format as YYYY-MM-DD
          list.push({
            name: dateString.slice(5, 10),
            orderRebateAmount: 0,
            orderRebateNumber: 0,
          })
        }
      } else if (activeTab.value == 'draw') {
        for (let i = 29; i >= 0; i--) {
          const dates = new Date(date)
          dates.setDate(dates.getDate() - i)
          const dateString = dates.toISOString().split('T')[0] // Format as YYYY-MM-DD
          list.push({
            name: dateString.slice(5, 10),
            withdrawalAmount: 0,
            withdrawalNumber: 0,
          })
        }
      } else if (activeTab.value == 'balance') {
        for (let i = 29; i >= 0; i--) {
          const dates = new Date(date)
          dates.setDate(dates.getDate() - i)
          const dateString = dates.toISOString().split('T')[0] // Format as YYYY-MM-DD
          list.push({
            name: dateString.slice(5, 10),
            cardBalanceRechargeAmount: 0,
            cardBalanceRechargeNumber: 0,
          })
        }
      }
    } else if (val1 == '近七日') {
      val.forEach((item: any) => {
        item.name = item.name.slice(5, 10)
      })
      if (activeTab.value == 'user') {
        for (let i = 6; i >= 0; i--) {
          const dates = new Date(date)
          dates.setDate(dates.getDate() - i)
          const dateString = dates.toISOString().split('T')[0] // Format as YYYY-MM-DD
          list.push({
            name: dateString.slice(5, 10),
            userGradeNumberOther: 0,
          })
        }
      } else if (activeTab.value == 'order') {
        for (let i = 6; i >= 0; i--) {
          const dates = new Date(date)
          dates.setDate(dates.getDate() - i)
          const dateString = dates.toISOString().split('T')[0] // Format as YYYY-MM-DD
          list.push({
            name: dateString.slice(5, 10),
            orderAmount: 0,
            orderNumber: 0,
            orderRefundAmount: 0,
            orderRefundNumber: 0,
          })
        }
      } else if (activeTab.value == 'card') {
        for (let i = 6; i >= 0; i--) {
          const dates = new Date(date)
          dates.setDate(dates.getDate() - i)
          const dateString = dates.toISOString().split('T')[0] // Format as YYYY-MM-DD
          list.push({
            name: dateString.slice(5, 10),
            cardActivation: 0,
            cardSystemActivation: 0,
            num: 0,
          })
        }
      } else if (activeTab.value == 'rebate') {
        for (let i = 6; i >= 0; i--) {
          const dates = new Date(date)
          dates.setDate(dates.getDate() - i)
          const dateString = dates.toISOString().split('T')[0] // Format as YYYY-MM-DD
          list.push({
            name: dateString.slice(5, 10),
            orderRebateAmount: 0,
            orderRebateNumber: 0,
          })
        }
      } else if (activeTab.value == 'draw') {
        for (let i = 6; i >= 0; i--) {
          const dates = new Date(date)
          dates.setDate(dates.getDate() - i)
          const dateString = dates.toISOString().split('T')[0] // Format as YYYY-MM-DD
          list.push({
            name: dateString.slice(5, 10),
            withdrawalAmount: 0,
            withdrawalNumber: 0,
          })
        }
      } else if (activeTab.value == 'balance') {
        for (let i = 6; i >= 0; i--) {
          const dates = new Date(date)
          dates.setDate(dates.getDate() - i)
          const dateString = dates.toISOString().split('T')[0] // Format as YYYY-MM-DD
          list.push({
            name: dateString.slice(5, 10),
            cardBalanceRechargeAmount: 0,
            cardBalanceRechargeNumber: 0,
          })
        }
      }
    }
    if (activeTab.value == 'user') {
      val.forEach((item: any) => {
        list.forEach((items) => {
          if (item.name === items.name) {
            console.log(11111)
            items.userGradeNumberOther = item.userGradeNumberOther
          }
        })
      })
    } else if (activeTab.value == 'order') {
      val.forEach((item: any) => {
        list.forEach((items) => {
          if (item.name === items.name) {
            console.log(11111)
            items.orderAmount = item.orderAmount
            items.orderNumber = item.orderNumber
            items.orderRefundAmount = item.orderRefundAmount
            items.orderRefundNumber = item.orderRefundNumber
          }
        })
      })
    } else if (activeTab.value == 'card') {
      val.forEach((item: any) => {
        list.forEach((items) => {
          if (item.name === items.name) {
            console.log(11111)
            items.cardActivation = item.cardActivation
            items.cardSystemActivation = item.cardSystemActivation
            items.num = Math.floor((item.cardActivation - item.cardSystemActivation) * 100) / 100
          }
        })
      })
    } else if (activeTab.value == 'rebate') {
      val.forEach((item: any) => {
        list.forEach((items) => {
          if (item.name === items.name) {
            console.log(11111)
            items.orderRebateAmount = item.orderRebateAmount
            items.orderRebateNumber = item.orderRebateNumber
          }
        })
      })
    } else if (activeTab.value == 'draw') {
      val.forEach((item: any) => {
        list.forEach((items) => {
          if (item.name === items.name) {
            items.withdrawalAmount = item.withdrawalAmount
            items.withdrawalNumber = item.withdrawalNumber
          }
        })
      })
    } else if (activeTab.value == 'balance') {
      val.forEach((item: any) => {
        list.forEach((items) => {
          if (item.name === items.name) {
            items.cardBalanceRechargeAmount = item.cardBalanceRechargeAmount
            items.cardBalanceRechargeNumber = item.cardBalanceRechargeNumber
          }
        })
      })
    }

    return list
  }
  onMounted(() => {
    themeColor.value = appStore.theme
    timeForm.addTime = dayjs('00:00:00', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
    timeForm.endTime = dayjs('23:59:59', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
    getUserLines()
    // getCardStates()
    getLineTabData()
    doRefresh()
    doRefresh1()
    doRefresh2()
    // getStatics()
    gettongjis()
    userDetailFn()
    mallStatisticsFn()
  })
</script>

<style scoped lang="less">
  .main-base-dark-theme .numItems {
    .title,
    .nums {
      color: #fff !important;
    }
  }
  :deep(.arco-skeleton-line) {
    margin: auto;
  }

  .tongjiBox_order {
    width: 100%;

    .tops {
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        font-size: 14px;
      }

      .times {
        font-size: 14px;

        .noactive {
          color: var(--color-neutral-10);
          margin-left: 10px;
          cursor: pointer;
        }

        .actives {
          color: #3491fa;
          margin-left: 10px;
          cursor: pointer;
        }
      }
    }

    .tabsBox {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;

      .activeItems {
        background: linear-gradient(180deg, #3490fa1b, #fff);
      }

      .items {
        cursor: pointer;
        width: 16%;
        border: 1px solid #f2f3f5;
        border-radius: 10px;
        height: 93px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        box-sizing: border-box;

        .left {
          width: 25%;
          height: 100%;
          display: flex;
          justify-content: center;

          img {
            width: 30px;
            height: 30px;
          }
        }

        .right {
          width: 70%;

          .addUser {
            font-size: 12px;
            color: var(--color-neutral-6);
          }

          .nums {
            font-size: 18px;
            margin: 6px 0px;
          }

          .oner {
            width: 100%;
            border-top: 1px solid #f2f3f5;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: var(--color-neutral-6);
            padding-top: 6px;
          }
        }
      }
    }
  }

  .cardStateBox {
    width: 100%;
    display: flex;
    margin: 0px 0px 20px;
    align-items: center;
    justify-content: space-between;

    .left {
      width: 74.5%;
      height: auto;
      padding: 20px;
      box-sizing: border-box;
      border-radius: 10px;
      background-color: var(--color-bg-2);

      .tops {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .times {
          .noactive {
            color: var(--color-neutral-10);
            margin-left: 10px;
            cursor: pointer;
          }

          .actives {
            color: #3491fa;
            margin-left: 10px;
            cursor: pointer;
          }
        }
      }
      .leftBottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .rightNumList {
          width: 58%;
          height: 180px;
          display: flex;
          justify-content: space-between;
          align-content: space-around;
          flex-wrap: wrap;
          padding: 0px 20px;
          box-sizing: border-box;
          .numItems {
            width: 25%;
            .title {
              font-size: 14px;
              color: #4e5969;
            }
            .nums {
              font-size: 22px;
              color: #4e5969;
              font-weight: bold;
              margin-top: 10px;
            }
          }
        }
      }
    }
    .right {
      width: 24%;

      height: 264px;
      padding: 20px;
      box-sizing: border-box;
      border-radius: 10px;
      background-color: var(--color-bg-2);

      .content {
        width: 100%;
        height: 80%;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-content: space-around;
        flex-wrap: wrap;

        .btnsItem {
          width: 24%;
          cursor: pointer;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;

          img {
            width: 50px;
            height: 50px;
          }

          p {
            width: 100%;
            text-align: center;
            font-size: 14px;
          }
        }
      }
    }
  }

  .blueBox {
    width: 100%;
    display: flex;
    margin: 0px 0px 20px;
    align-items: center;
    justify-content: space-between;

    .left {
      width: 74.5%;
      height: 222px;
      padding: 20px;
      box-sizing: border-box;
      border-radius: 10px;
      // background: linear-gradient(110deg, #3491fa, #7bc0fc);
      background-color: #fff;

      .tops {
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          font-size: 16px;
          // color: #fff;
          color: #000000;
        }

        div {
          font-size: 12px;
          // color: #fff;
          color: #000000;
        }
      }

      :deep(.arco-alert-normal) {
        // background-color: rgb(242 243 245 / 20%);
        background-color: #e8f7ff;
        border-radius: 10px;
        // color: #fff !important;
        color: #3491fa !important;
      }

      :deep(.arco-alert-content) {
        // color: #fff !important;
        color: #3491fa !important;
      }

      .now {
        // color: #fff;
        color: #3491fa !important;
        cursor: pointer;
      }

      .content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;

        .items {
          width: 14%;

          p {
            width: 100%;
          }

          .p_1 {
            font-size: 14px;
            // color: #fff;
            color: #000000;
            margin-bottom: 12px;
          }

          .p_2 {
            font-size: 24px;
            // color: #fff;
            color: #000000;
            font-weight: bold;
          }
        }
      }
    }
    .right {
      width: 24%;
      height: 222px;
      padding: 20px;
      box-sizing: border-box;
      border-radius: 10px;
      background-color: var(--color-bg-2);
      .rightTop {
        display: flex;
        justify-content: flex-start;
        img {
          width: 45px;
          height: 45px;
        }
        .icon_text {
          margin-left: 12px;
          .title {
            font-size: 16px;
            color: var(--color-neutral-10);
            font-weight: bold;
          }
          .texts {
            font-size: 13px;
            color: var(--color-neutral-10);
          }
        }
      }
      .content {
        margin-top: 20px;
        .item1 {
          height: 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }

  .contentBg {
    margin: 0px 0px 20px;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    background-color: var(--color-bg-2);

    .tagBoxs {
      width: 100%;
      margin-top: 20px;
      height: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .tags {
        width: 19%;
        border-radius: 10px;
        padding: 22px;
        box-sizing: border-box;
        border: 1px solid rgb(229, 230, 235);
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 13px;

          .imgs {
            width: 46px;
            height: 46px;
            background-color: #3491fa;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 12px;
            border-radius: 50%;
          }

          .setNew {
            margin-bottom: 4px;
          }

          .sets {
            color: var(--color-neutral-6);
          }
        }

        .right {
          height: 32px;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid rgb(229, 230, 235);
          border-radius: 16px;
          padding: 0px 8px;

          .types {
            font-size: 12px;
            margin-left: 6px;
          }
        }
      }
    }
  }

  .bottomTable {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .box_3 {
      min-height: 662px;

      :deep(.bcg) {
        padding: 0px;
      }

      .tops {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .times {
          .noactive {
            color: var(--color-neutral-10);
            margin-left: 10px;
            cursor: pointer;
          }

          .actives {
            color: #3491fa;
            margin-left: 10px;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
